<template>
  <div class="me">
    <div class="container">
      <div class="header">
        <div class="callMe">
          <div class="box">
            <i
              class="fa fa-phone"
              aria-hidden="true"
              style="font-size: 0.8rem"
            ></i>
            17854118501
          </div>
          <div class="box">
            <i class="fa fa-envelope" aria-hidden="true"></i>
            17854118501@163.com
          </div>
          <div class="addr">
            <i
              class="fa fa-globe"
              aria-hidden="true"
              style="font-size: 0.9rem"
            ></i>
            山东 潍坊
          </div>
        </div>
        <div class="avatar">
          <div class="imgCon">
            <img src="/img/avatar.jpg" alt="" />
          </div>
          <div class="name">寝食难安</div>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <div class="box">
            <div class="item">
              <div class="label">姓名:</div>
              <div class="info">于风洁</div>
            </div>
            <div class="item">
              <div class="label">生辰:</div>
              <div class="info">1997.7.2</div>
            </div>
            <div class="item">
              <div class="label">性别:</div>
              <div class="info">男</div>
            </div>
            <div class="item">
              <div class="label">籍贯:</div>
              <div class="info">山东 潍坊</div>
            </div>
            <div class="item">
              <div class="label">经验:</div>
              <div class="info">1年</div>
            </div>
          </div>
          <div class="box">
            <div>I am a</div>
            <div>Philosopher,</div>
            <div>Thinker,</div>
            <div>Observer.</div>
          </div>
        </div>
        <div class="right">
          <div class="title">About<span>Me</span></div>
          <my-title>教育背景</my-title>
          <div class="info">
            2015.9-2019.6 <span class="hl">齐鲁工业大学</span
            ><span class="hl">全日制统招</span><span class="hl">本科</span>
          </div>
          <my-title>工作经历</my-title>
          <div class="info">
            <p>2019.6-2020.7 歌尔股份(射频检测)</p>
            <p>2020.7-至今 济南山海图经</p>
          </div>
          <my-title>学习经历</my-title>
          <div class="info">
            <p>
              1. 使用vue,css编写常用UI组件
              <href href="http://39.106.40.77/#/css"></href>
            </p>
            <p>
              2.使用openlayers进行地图交互
              <href href="http://39.106.40.77/#/openlayer"></href>
            </p>
            <p>
              3.使用python写的一个小爬虫
              <href href="https://gitee.com/yfj44/crawl_wallhaven"></href>
            </p>
            <p>
              4.使用d3绘制简单几何图形,导入,导出(CAD?)<href
                href="https://gitee.com/yfj44/vue3-draw-js"
              ></href>
            </p>
            <p>
              5.使用原型的方式二次封装类库,rollup压缩混淆
              <href href="https://gitee.com/yfj44/cesium-bundle"></href>
            </p>
            <p>
              6.爬取全球的DEM文件,通过经纬读取高程信息,flask后端路由
              <href href="https://gitee.com/yfj44/get-px-by-lon-lat"></href>
            </p>
          </div>
          <my-title>项目经历</my-title>
          <div class="info">
            <p>
              0.
              <span class="hl">博客/简历</span>
              在bilibil && codePen学习,使用vue3封装的一些好看的css组件
              <href href="http://39.106.40.77/#/css"></href>
            </p>
            <p>
              1.
              <span class="hl">双月智慧社区</span>
              编写层级选择卡片组件,封装axios请求路由
            </p>
            <p>
              2.
              <span class="hl">3D-Map</span>
              使用cesium二次封装常用功能,项目架构,图层切换,多级菜单,自定义UI组件
            </p>
            <p>
              3.
              <span class="hl">农业GIS区域分析系统</span>
              使用openlayers二次封装常用功能,
              数据可视化(Echarts柱形图),项目架构,图层切换,地图常驻标注弹框,分层设色图,mockjs模拟数据
            </p>
            <p>
              4.
              <span class="hl">党建数据管理系统</span>
              数据可视化(Echarts柱形图,饼图,使用svg编写的多环比例图,使用css编写的块状进度条),axios请求,接口对接
            </p>
          </div>
        </div>
      </div>
      <div class="footer"></div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Href from "./Href.vue";
import Title from "./Title.vue";
export default defineComponent({
  components: { Href, myTitle: Title },
});
</script>
<style lang="scss" scoped>
@import "./me.scss";
</style>
